<template>
  <!-- 视频详情 -->
  <div id="videoDtl">
    <van-nav-bar left-arrow
                 @click-left="$router.go(-1)" />
    <video ref="video"
           class="video"
           :src="videoSrc"
           width="100%"
           autoplay="autoplay"
           @click="handleVideo"></video>
    <div class="content">
      <van-row>
        <van-col span="19"
                 class="userDtl">
          <van-cell :border="false"
                    :title="videoDtl.creator.nickname"
                    center>
            <template #icon>
              <van-image round
                         width="40"
                         height="40"
                         :src="videoDtl.creator.avatarUrl" />
            </template>
          </van-cell>
          <van-collapse v-model="activeNames"
                        :border="false">
            <van-collapse-item :border="false"
                               :title="videoDtl.title.slice(0, 22)"
                               name="1"
                               class="collapseItem">
              <p>{{ videoDtl.title }}</p>
              <p style="padding-top: 5%">{{ videoDtl.description }}</p>
            </van-collapse-item>
          </van-collapse>
        </van-col>
        <van-col span="5"
                 class="iconDtl">
          <van-grid :column-num="1">
            <van-grid-item icon="good-job"
                           :text="videoDtl.subscribeCount">
            </van-grid-item>
            <van-grid-item icon="chat"
                           :text="videoDtl.commentCount" />
            <van-grid-item icon="share"
                           :text="videoDtl.shareCount" />
            <van-grid-item icon="add-square"
                           text="收藏" />
          </van-grid>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { getVideoUrl, getVideoDetail } from '@/api/videoApi'
export default {
  name: 'videoDtl',
  data() {
    return {
      videoSrc: '',
      videoDtl: {},
      video: true,
      activeNames: [],
    }
  },
  methods: {
    handleVideo() {
      if (this.video) {
        this.$refs.video.pause()
        this.video = false
      } else {
        this.$refs.video.play()
        this.video = true
      }
    },
    initData(id) {
      getVideoUrl(id).then((res) => {
        this.videoSrc = res.urls[0].url
      })
      getVideoDetail(id).then((res) => {
        this.videoDtl = res.data
      })
    },
  },
  mounted() {
    this.initData(this.$route.query.id)
  },
}
</script>

<style scoped>
#videoDtl {
  width: 100%;
  height: 100vh;
  background: #000;
}
#videoDtl .video {
  padding-top: 20%;
}
#videoDtl /deep/ .van-nav-bar .van-icon {
  color: #fff;
  font-size: 0.6rem;
}
#videoDtl .van-nav-bar {
  background: #000;
}
.content .van-cell {
  padding: 1px 0.426667rem;
  background: transparent;
  color: #fff;
}
.content /deep/ .van-cell--clickable {
  font-size: 10px;
  background: transparent;
  color: #fff;
  padding: 1px 0.426667rem;
}
.content /deep/ .van-collapse-item__content {
  background: transparent;
  color: #fff;
}
.content .userDtl {
  position: absolute;
  bottom: 10%;
}
.collapseItem p {
  font-size: 10px;
}
.iconDtl {
  position: absolute;
  right: 0;
  bottom: 10%;
}
.iconDtl /deep/ .van-grid-item__content {
  padding: 5px 10px;
  color: #fff;
  background: transparent;
}
.iconDtl /deep/ .van-grid-item__text {
  color: #fff;
}
.iconDtl /deep/ .van-grid-item__icon + .van-grid-item__text {
  margin: 0;
}
</style>